<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/validate.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">

    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" rel="stylesheet">
    <link href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/js/bootstrap-clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">
    <script>
        if (document.referrer === ''){
            location='/index';
        }
    </script>
</head>
<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-md-6 col-xl-3">
            <div class="card bg-primary text-white">
                <div class="card-body clearfix">
                    <div class="flex-box">
                        <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fs-22"></i></span>
                        <span class="fs-22 lh-22"><div th:text="${incomecount}"/></span>
                    </div>
                    <div class="text-right">本月个人营业额</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="card bg-purple text-white">
                <div class="card-body clearfix">
                    <div class="flex-box">
                        <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-content-paste fs-22"></i></span>
                        <span class="fs-22 lh-22"><div th:text="${ordercount}"/></span>
                    </div>
                    <div class="text-right">本月个人订单数</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-danger text-white">
                <div class="card-body clearfix">
                    <div class="flex-box">
                        <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account-group fs-22"></i></span>
                        <span class="fs-22 lh-22"><div th:text="${custcount}"/></span>
                    </div>
                    <div class="text-right">客户总数</div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <header class="card-header"><div class="card-title">汽车销量排行榜</div></header>
                <div class="card-body">
                    <canvas id="chart-carsale" width="400" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <header class="card-header"><div class="card-title">客户地区分布图</div></header>
                <div class="card-body">
                    <canvas id="chart-cust" width="280" height="280"></canvas>
                </div>
            </div>
        </div>


    </div>
</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="/js/Chart.min.js"></script>


<script>
    new Chart($("#chart-carsale"), {
        type: 'horizontalBar',
        data: {
            labels: [(${carname})],
            datasets: [{
                label: "销量",
                backgroundColor: "rgba(51,202,185,0.5)",
                borderColor: "rgba(0,0,0,0)",
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
                data: [[${sale}]]
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });







    new Chart($("#chart-cust"), {
        type: 'pie',
        data: {
            labels: [(${address})],
            datasets: [{
                data: [[${addressnum}]],
                backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)','rgba(125,123,132,1)', 'rgba(54, 52, 265, 1)', 'rgba(266, 152, 366, 3)']
            }]
        },
        options: {
            responsive: false
        }
    });




</script>


</body>
</html>
